<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>热映电影</el-breadcrumb-item>
      <el-breadcrumb-item>热门影评</el-breadcrumb-item>
    </el-breadcrumb>

    <el-row class="margintop20">
      <el-col style="height:600px">
        <el-table
          v-if="tableData!==null"
          :data="tableData.slice((page-1)*pageSize,pageSize*page)"
          style="width: 100%"
          :header-cell-style="{'text-align':'center'}"
          :cell-style="{'text-align':'center'}"
          stripe
          class="box1"
        >
          <el-table-column label="序号" type="index" width="220"></el-table-column>
          <el-table-column label="电影" width="220">
            <template slot-scope="scope">
              <span>{{ scope.row.movie.title}}</span>
              <img :src="scope.row.movie.images.large.replace(/img7/,'img3')" alt class="tu" />
            </template>
          </el-table-column>
          <el-table-column label="发表时间" width="220">
            <template slot-scope="scope">
              <i class="el-icon-time"></i>
              <span
                style="margin-left: 10px"
              >{{ scope.row.time | timeFormat('YYYY-MM-DD HH:mm:ss')}}</span>
            </template>
          </el-table-column>
          <el-table-column label="姓名" width="220">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.author}}</span>
            </template>
          </el-table-column>
          <el-table-column label="评论标题" width="220">
            <template slot-scope="scope">
              <el-popover trigger="hover" placement="top">
                <p>评论内容: {{ scope.row.content }}</p>
                <div slot="reference" class="name-wrapper">
                  <el-tag size="medium" effect="dark">{{ scope.row.title}}</el-tag>
                </div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column v-if="roleid > 3" label="管理员特权：删除！">
            <template slot-scope="scope">
              <el-button slot="reference" type="info" icon="el-icon-message" circle @click="dakai(scope.row)"></el-button>
              <el-popconfirm
                confirmButtonText="政见不同"
                cancelButtonText="免他一屎"
                icon="el-icon-info"
                iconColor="red"
                title="让他消失?"
                @onConfirm="delOne(scope.row)"
              >
                <el-button slot="reference" type="danger" icon="el-icon-delete" circle style="margin-left:10px"></el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
          <el-table-column v-else label="权限过低，只能看看">
            <template slot-scope="scope">
              <el-button slot="reference" type="info" icon="el-icon-message" circle @click="dakai(scope.row)"></el-button>
              <el-popconfirm
                confirmButtonText="有别的想法"
                cancelButtonText="留着吧"
                icon="el-icon-info"
                iconColor="red"
                title="让他消失?"
                @onConfirm="delOne(scope.row)"
                v-show="scope.row.author == mingzi"
              >
                <el-button slot="reference" type="danger" icon="el-icon-delete" circle style="margin-left:10px"></el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页插件 第几页page 一页多少个pageSize 总共多少个total -->
        <div class="flexbox">
          <el-pagination
            background
            layout="prev, pager, next"
            @current-change="changeCurrent"
            :page-size="pageSize"
            :current-page="page"
            :total="total"
          ></el-pagination>
          <span>共 {{total}} 条数据</span>
        </div>
      </el-col>
    </el-row>

    <!-- 弹出评论回复 -->
    <el-dialog title="评论回复" :visible.sync="dialogVisible" width="30%" >
      <el-form
        :model="form"
        :rules="rules"
        ref="myform"
        label-width="100px"
        label-position="right"
        class="myform"
      >
        <el-form-item label="留下回复" prop="subtitle">
          <el-input v-model="form.subtitle"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addhui()">发 表</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import { getplist,deleteone, addhf } from "@/api";
export default {
  data() {
    return {
      form:{},
      dialogVisible:false,
      mingzi:sessionStorage.getItem('username'),
      tableData: [],
      page: 1,
      pageSize: 4,
      roleid:null,
      rules:{
          subtitle:[
            {required:true,message:"请输入评论内容",trigger:"blur",trigger:"blur"},
          ]
      },
      update:{},
    };
  },
  computed: {
    total() {
      return this.tableData.length;
    },
  },
  mounted() {
    getplist().then((res) => {
      this.tableData = res.result;
    });
    this.roleid = sessionStorage.getItem('roleid');
  },
  methods: {
    dakai(data){
      this.dialogVisible = true;
      this.update = {
                ...data
            }
    },
    addhui(){//发表评论回复
      console.log(this.update._id);
      console.log(this.form.subtitle);
      addhf({
        _id:this.update._id,
        subtitle:this.form.subtitle,
        mingzi:this.mingzi
      })
      .then(res=>{
        if(res.type){
          this.dialogVisible=false
        }
      })
    },

    handleEdit() {},
    handleDelete() {},
    changeCurrent(page) {
      //分页绑定事件更改页码配合splice做到分页的效果！！！好好看
      this.page = page;
    },
    delOne(data){
      // console.log(data);
      deleteone(data)
      .then(res=>{
          if(res.type){
            this.tableData = this.tableData.filter(item=>item._id!==data._id)
          }
      })
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-breadcrumb__inner {
  color: rgb(240, 124, 124) !important;
}
.el-breadcrumb {
  font-size: 30px;
}
.tu {
  width: 50px;
  height: 50px;
}
.flexbox {
  background: #fafafa;
  text-align: right;
}
</style>